<template>
  <div class="data-source">
    <div>
      <a-button type="primary" @click="addDataSource">新增数据源</a-button>
    </div>
    <div class="sheet h-[820px]">
      <a-table
        :columns="DataColumns"
        :data-source="data"
        :pagination="pagination"
        :scroll="{
          x: true,
          y: 650,
        }"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              数据源名称
            </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="
                  tag === 'loser'
                    ? 'volcano'
                    : tag.length > 5
                      ? 'geekblue'
                      : 'green'
                "
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link">
                More actions
                <down-outlined />
              </a>
            </span>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-space :size="8">
              <a-button class="text-[#1677ff]" type="text">编辑</a-button>
              <a-button class="text-[#67C23A]" type="text">配置</a-button>
              <a-button type="text" danger>删除</a-button>
              <a-button class="text-[#909399]" type="text">查看</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <dataDialog ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, defineAsyncComponent } from 'vue';
  import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
  import type { PaginationProps } from 'ant-design-vue';
  import { DataColumns } from '@/config/header-setting';

  const dataDialog = defineAsyncComponent(
    () => import('./components/dialog.vue'),
  );

  const dialogRef = ref();

  const data = [
    {
      id: 1,
      name: 'MySQL生产库',
      connectionInfo: 'jdbc:mysql://prod-db:3306',
      description: '主要业务数据存储',
    },
    {
      id: 2,
      name: 'Redis缓存',
      connectionInfo: 'redis://cache-server:6379',
      description: '用户会话缓存',
    },
    {
      id: 3,
      name: 'ElasticSearch',
      connectionInfo: 'http://es-cluster:9200',
      description: '全文检索服务',
    },
  ];

  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    pageSizeOptions: ['10', '20', '30', '40'],
    current: 1,
    total: data.length,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `总数据位：${total}`,
    onChange(current, pageSize) {
      pagination.pageSize = pageSize;
      pagination.current = current;
      init();
    },
  });

  const init = async () => {};

  const addDataSource = () => {
    dialogRef.value?.openDialog();
  };
</script>

<style scoped lang="scss"></style>
